<template>
    <div>
        <el-form label-width="100px">
            <el-form-item label="SKU名称">
                <el-input placeholder="SKU名称"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input placeholder="价格(元)" type="number"></el-input>
            </el-form-item>
            <el-form-item label="重量(g)">
                <el-input placeholder="重量(g)" type="number"></el-input>
            </el-form-item>
            <el-form-item label="SKU描述">
                <el-input placeholder="SKU描述" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true">
                    <el-form-item label="属性">
                        <el-select>
                            <el-option>小明</el-option>
                            <el-option>小米</el-option>
                            <el-option>小黑</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="属性值">
                        <el-select>
                            <el-option>小明</el-option>
                            <el-option>小米</el-option>
                            <el-option>小黑</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true">
                    <el-form-item label="销售1">
                        <el-select>
                            <el-option>小明</el-option>
                            <el-option>小米</el-option>
                            <el-option>小黑</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销售2">
                        <el-select>
                            <el-option>小明</el-option>
                            <el-option>小米</el-option>
                            <el-option>小黑</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片名称">
                <el-table border>
                    <el-table-column type="selection" width="80px" align="center"></el-table-column>
                    <el-table-column label="图片">123</el-table-column>
                    <el-table-column label="名称">456</el-table-column>
                    <el-table-column label="操作">789</el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" @click="save">保存</el-button>
                <el-button type="primary" size="default" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
//引入请求API
import { reactive, ref } from 'vue'
import { reqAttr } from '@/api/product/attr/index';
import { reqSpuImageList, reqSpuHasSaleAttr, reqAddSku } from '@/api/product/spu';
import type { SkuData } from '@/api/product/spu/type'

//收集SKU的参数
let skuParams = reactive<SkuData>({
    //父组件传递过来的数据
    "category3Id": "",//三级分类的ID
    "spuId": "",//已有的SPU的ID
    "tmId": "",//SPU品牌的ID
    //v-model收集
    "skuName": "",//sku名字
    "price": "",//sku价格
    "weight": "",//sku重量
    "skuDesc": "",//sku的描述

    "skuAttrValueList": [//平台属性的收集
    ],
    "skuSaleAttrValueList": [//销售属性
    ],
    "skuDefaultImg": "",//sku图片地址
})
//平台属性
let attrArr = ref<any>([]);
//销售属性
let saleArr = ref<any>([]);
//照片的数据
let imgArr = ref<any>([]);
//获取table组件实例
let table = ref<any>();
//取消按钮的回调
const cancel = () => {
    $emit('changeScene', 0)
}

//当前子组件的方法对外暴露
const initSkuData = async (c1Id: number | string, c2Id: number | string, spu: any) => {
    //收集数据
    console.log('这一块没办法做')
    skuParams.category3Id = spu.category3Id;
    skuParams.spuId = spu.id;
    skuParams.tmId = spu.tmId;
    //获取平台属性
    let res: any = await reqAttr(c1Id, c2Id, spu.category3Id);
    console.log(res,'res')
    //获取对应的销售属性
    let res1: any = await reqSpuHasSaleAttr(spu.id);
    console.log(res1,'res1')
    //获取照片墙的数据
    let res2: any = await reqSpuImageList(spu.id);
    console.log(res2,'res2')
    //平台属性
    attrArr.value = res.data;
    //销售属性
    saleArr.value = res1.data;
    //图片
    imgArr.value = res2.data;
}

const save = () => { }

//对外暴露方法
defineExpose({ initSkuData });
//自定义事件 $emit
let $emit = defineEmits(['changeScene'])
</script>

<style scoped lang="scss"></style>